<template>
  <div class="apply">
    <Navigation></Navigation>
    <div class="page-title">
      <h1>欢迎进入秒杀系统</h1>
    </div>

    <div class="apply-block">
      <div class="apply-title">
        <h2>申请规则介绍</h2>
      </div>

      <div class="apply-content">
        <ul>
          <li>近3年逾期2次以上无法进入（金额小于1000 元，3天内还清的除外）</li>
          <li>状态为“无业/失业”无法进入</li>
          <li>
            个人客户被列入当前严重违法失信被 执行人名单，未执行完毕的无法进入
          </li>
          <li>年龄小于18岁的无法进入</li>
        </ul>

        <div class="apply-choose">
          <h2>是否申请进入产品秒杀页面?</h2>
          <el-button type="primary" @click="applyEnter()">申请进入</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { applyRecord } from "@/api/log";
export default {
  name: "Apply",
  computed: {
    ...mapState({
      role: (state) => state.login.role,
      userId: (state) => state.login.userId,
    }),
  },
  methods: {
    applyEnter() {
      let perm = this.role;

      // 提交申请记录
      applyRecord(this.userId);

      if (perm !== "admin" && perm !== "common") {
        this.$message.error("您不满足申请条件");
        return false;
      } else {
        this.$router.push("/goodList");
      }
    },
  },
};
</script>

<style>
.apply {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../assets/register.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.page-title {
  text-align: center;
  margin-top: 5%;
}

.apply-block {
  left: 50%;
  top: 45%;
  position: absolute;
  width: 600px;
  height: 345px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.apply-title {
  text-align: center;
  width: 600px;
  height: 35px;
  border-bottom: 1px solid #ddd;
}

.apply-content ul li {
  list-style: decimal;
  font-size: 17px;
  line-height: 40px;
}

.apply-choose {
  text-align: center;
}
</style>